<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码片段</title>
    <!-- <base target="_blank"> -->

    <link rel="stylesheet" href="demo/highlight/default.min.css">
    <!-- <link rel="stylesheet" href="//apps.bdimg.com/libs/highlight.js/9.1.0/styles/vs2015.min.css"> -->
    <!-- <link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/vs2015.css"> -->
    <script src="demo/highlight/highlight.min.js"></script>
    <script src="demo/markdown/marked.min.js"></script>

    <script src="/static/js/vue.js"></script>
    <style>
        #app {
            display: flex;
        }

        .sidebar {
            flex-shrink: 0;
            margin-right: 20px;
            width: 150px;
        }

        .content {
            width: 100%;
        }

        .code-box {
            width: 100%;
        }

        .show-box {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="sidebar">
            <div>代码片段</div>

            <div v-for="item in list">
                <a href="javascript:;" @click="handleItemClick(item)">{{item.name}}</a>
            </div>
        </div>


        <div class="content">
            <!-- 标题 -->
            <h1>{{current.name}}</h1>
            <p>在线演示：<a :href="current.codeUrl" target="_blank">{{current.codeUrl}}</a></p>
            <!-- 描述 -->
            <div class="desc" v-html="readme"></div>

            <!-- 代码显示 -->
            <div class="code-box">
                <h2>原始代码</h2>
                <div v-highlight v-html="rawCode"></div>
            </div>

            <!-- 代码显示 -->
            <div class="show-box" v-if="current.showCode">
                <h2>代码效果</h2>
                <div>
                    <iframe :src="current.codeUrl" frameborder="0" id="urlIframe" marginwidth="0" marginheight="0"
                        width="100%" name="i" id="urlIframe" scrolling="no" @load="reinitIframe()"></iframe>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 目录
        const list = [{
                name: "鼠标经过图片放大",
                codeUrl: 'demo/transform/index.html',
                readmeUrl: 'demo/transform/readme.md',
                showCode: true
            },
            {
                name: "聚合搜索",
                codeUrl: "chrome/search/index.js",
                readmeUrl: 'chrome/search/readme.md',
            },
            {
                name: "代码高亮",
                codeUrl: "demo/highlight/index.html",
                readmeUrl: 'demo/highlight/readme.md',
                showCode: true
            },
            {
                name: "markdown",
                codeUrl: 'demo/markdown/index.html',
                readmeUrl: 'demo/markdown/readme.md',
                showCode: true
            },
            {
                name: "回到顶部",
                codeUrl: 'demo/scroll-top/index.html',
                readmeUrl: 'demo/scroll-top/readme.md',
                showCode: true
            },
            {
                name: "点击复制",
                codeUrl: 'demo/copy-text/index.html',
                readmeUrl: 'demo/copy-text/readme.md',
                showCode: true
            },
            {
                name: "事件",
                codeUrl: 'demo/event/index.html',
                readmeUrl: 'demo/event/readme.md',
                showCode: true
            },





        ];

        // https://blog.csdn.net/u014715787/article/details/88559572
        Vue.directive('highlight', function (el) {
            let blocks = el.querySelectorAll('pre code');
            blocks.forEach((block) => {
                hljs.highlightBlock(block)
            })
        });
        // https://pengshiyu.blog.csdn.net/article/details/104325766
        function request(url, method = "GET") {
            return new Promise((resolve, reject) => {
                // 大多数浏览器
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open(method, url, true);
                xmlHttp.send(null);
                xmlHttp.onreadystatechange = function () {
                    // 双重判断 xmlHttp状态为服务器响应结束，服务器状态响应结束
                    if (xmlHttp.readyState == 4)
                        if (xmlHttp.status == 200) {
                            var text = xmlHttp.responseText;
                            resolve(text)
                        } else {
                            reject()
                        }
                }
            })
        };

        // https://blog.csdn.net/dxj124/article/details/89635805
        function html2Escape(sHtml) {
            return sHtml.replace(/[<>&"]/g, function (c) {
                return {
                    '<': '&lt;',
                    '>': '&gt;',
                    '&': '&amp;',
                    '"': '&quot;'
                } [c];
            });
        };


        new Vue({
            el: "#app",
            data() {
                return {
                    list: list,
                    showCode: '',
                    rawCode: '',
                    readme: '',
                    current: {}
                }
            },

            methods: {
                handleItemClick(item) {
                    this.current = item;
                    // 清空原来的显示内容
                    this.readme = ''
                    this.showCode = ''
                    this.rawCode = ''

                    request(item.codeUrl).then(res => {
                        this.rawCode = `<pre><code>${html2Escape(res)}</code></pre>`
                    })

                    if (item.readmeUrl) {
                        request(item.readmeUrl).then(res => {
                            this.readme = marked(res)
                        })
                    }
                },

                /**
                 * 页面中用到iframe不能完全显示的解决方案
                 * https://www.cnblogs.com/Johnny_Z/archive/2010/10/27/1862623.html
                 */
                reinitIframe() {
                    var iframe = document.getElementById("urlIframe");
                    try {
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        /*
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
                        var height = Math.max(bHeight, dHeight);
                        iframe.height = height; 
                        */
                        iframe.height = bHeight;
                    } catch (ex) {}
                }
            },

            created() {
                this.handleItemClick(this.list[0]);
            }
        })
    </script>
</body>

</html>